<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<link href="../jquery.inputpro.css" class="view-source" rel="stylesheet">
	<link href="../../dialog/jquery.dialog.css" class="view-source" rel="stylesheet">
	<link  href="../../../../themes/default/style.css" class="view-source" rel="stylesheet">
	<script src="../../../../scripts/jquery.js"  class="view-source" type="text/javascript"></script>
	<script src="../../../../scripts/common.js"  class="view-source" type="text/javascript"></script>
	<script src="../../../../scripts/browserfix.js"  class="view-source" type="text/javascript" ></script>
	<script src="../../../../scripts/plugins/jquery.json.js" type="text/javascript"></script>
	
	<script src="../jquery.inputpro.js" class="view-source" type="text/javascript"></script>
	
	<script src="../../dialog/jquery.dialog.js" class="view-source" type="text/javascript"></script>
	
	<script src="../../demo.js"></script>
	<link href="../../demo.css" rel="stylesheet">
	
<script type="text/javascript" class="view-source noparse"  >
	$( function(){
		$(".inputMultiImg").input(
		[{
					type:'class',//样式背景渲染
					src:'icon-search',//class 来自与 icon.css
					title:'查询',
					event:{
						click:function(val){
							alert("查询"+val);
						}
					}
				},{
					type:'class',//样式背景渲染
					src:'icon-remove',//class 来自与 icon.css
					title:'清除',
					event:{
						click:function(val,input){
							input.val('') ;
							alert("清除"+val);
						}
					}
				}]
		);

		$('#enable').click( function(){
			//设置控件为有效 inputImg('enable')
			jQuery(".inputimg").input().enable();
		} ) ;

		$('#disable').click( function(){
			//设置控件为无效 inputImg('disable')
			jQuery(".inputimg").input().disable();
		} ) ;

		$('#show').click( function(){
			//显示控件  inputImg('show')
			jQuery(".inputimg").input().show();
		} ) ;

		$('#hide').click( function(){
			//隐藏控件  inputImg('hide')
			jQuery(".inputimg").input().hide();
		} ) ;
	} ) ;
</script>
	
	<style type="text/css">
		.label{
			margin:10px;
			width:100px;
		}
		
	</style>
</head>

<body>
	<div>
		<div class="demo-operate">
			<b>操作</b>
			<div  class='block'>
			<input type="radio" value='0' checked name="state" id="enable"/> 可用
			<input type="radio" value="1" name="state" id="disable"/>不可用
			&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="radio" value='0' checked name="visable" id="show"/> 显示
			<input type="radio" value="1" name="visable" id="hide"/>隐藏
			</div>
		</div>
		
		<div class='demo-block'>
			<div class='label'>背景图片</div> 
			<input type='text' class='inputMultiImg inputimg'/>（多个图片）<br/><br>
			<input type='text' data-widget="inputimg" data-options="{type:'class',src:'icon-search',title:'查询',event:{click:function(val){alert('查询'+val);}}}"/>（单个图片）
		</div>
		
		<div  class='demo-block'>
			<div class='label'>URL图片</div> 
			<input type='text' data-widget="inputimg" data-options="{type:'img',src:'edit.png',event:{click:function(val){alert(val);}}}">
		</div>

		<div  class='demo-block'>
			<div class='label'>文本信息</div> 
			<input type='text'  data-widget="inputimg" data-options="{type:'text',src:'查询',url:'number_box.html',callback:function(val){alert(val);}}">
		</div>
	</div>
	
	<script type="viewsource"  class="view-source noparse inner-code">
<input type='text' data-widget="inputimg" data-options="{type:'class',src:'icon-search',title:'查询',event:{click:function(val){alert('查询'+val);}}}"/>（单个图片）
<input type='text' data-widget="inputimg" data-options="{type:'img',src:'../../../../../kissu1.0/themes/common/images/icons/edit.png',event:{click:function(val){alert(val);}}}">	
<input type='text'  data-widget="inputimg" data-options="{type:'text',src:'查询',event:{click:function(val){alert(val);}}}">	
	</script>
	
	<div class="demo-source">
	</div>
</body>
</html>